<template>
  <div class="container">
      <div class="left-title">
            <span>输入搜索</span>
            <el-input v-model="formL.search" placeholder="请输入用户昵称或者手机号..."  style="margin-right:20px;" clearable></el-input>
           <span>上次消费时间</span>
          <div class="timesel">
            <el-date-picker
                v-model="formL.startTime"
                type="date"
                placeholder="开始日期"
                :pickerOptions="startPickerOptions"
                class="choiceTime"
                size="small"
                :clearable="false"
                prefix-icon="el-icon-caret-bottom">
            </el-date-picker>
          </div>
          <span class="hengxian">--</span>
          <div class="timesel">
            <el-date-picker
                v-model="formL.endTime"
                type="date"
                placeholder="结束日期"
                :pickerOptions="endPickerOptions"
                class="choiceTime"
                size="small"
                :clearable="false"
                prefix-icon="el-icon-caret-bottom">
            </el-date-picker>
          </div>
      
        <el-button type="primary" @click="searchfun">查询</el-button>
        <el-button @click="resetdata">重置</el-button>
        <el-button type="warning" @click="addfun">添加</el-button>
     </div>
     <!-- <p>开始时间:{{ this.formL.startTime.valueOf() }}<br />结束时间:{{ this.formL.endTime.valueOf() }} <br />当前时间:{{ new Date().getTime() }}</p> -->
  </div>
</template>

<script>
  export default {
    data() {
      return {
          search: "",
          formL: {
            search: "",
            startTime: "",
            endTime: "",
          },
      }
    },
    methods:{
      searchfun(){
        this.$emit('searchFun',this.formL)
        this.$message({message: '查询成功!',center: true,type: 'success'});
      },
      resetdata(){
        this.formL.search = '';
        this.formL.startTime = '';
        this.formL.endTime = '';
        this.$emit('resetData',this.formL)
         this.$message({message: '重置成功!',center: true,type: 'success'});
      },
      addfun(){
        // 发射打开弹框时间
        this.$emit('showDialog')
      }
    },
    computed: {
      // 开始日期
    startPickerOptions() {
      const that = this;
      return {
        // 禁用的时间
        disabledDate(time) {
          if (that.formL.endTime) { 
            return (
              // time.getTime() > Date.now() ||
              time.getTime() > new Date(that.formL.endTime).getTime()
            );
          }
          // return time.getTime() > Date.now(); //实现1效果
        },
      };
    },
    // 结束日期
    endPickerOptions() {
      const that = this;
      return {
        disabledDate(time) {
          if (that.formL.startTime) {
            return (
              // time.getTime() > Date.now() ||
              time.getTime() < new Date(that.formL.startTime).getTime() 
            );
          }
          // return time.getTime() > Date.now(); //实现1效果
        },
      };
    },
  },
  }
</script>

<style lang="less" scoped>
.container{
  box-sizing: border-box;
   background-color: #fff;
   height: 64px;
   padding:20px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 16px;
   font-family: Microsoft YaHei;
   font-weight: bold;
   color: #333;
  span{
    margin-left: 10px;
    margin-right: 8px;
  }
  .hengxian{
    font-weight: normal;
    margin: 0 16px;
  }
  // 日期选中器样式
    /deep/ el-picker-panel {
    position: absolute;
    top: 155px;
    left: 630px;
    z-index: 2009;
  }
   .left-title {
      // 输入框
      .el-input{
        width: 200px;
        margin: 0 10px;

     }
    // 时间框
      .el-input--suffix{
        width: 150px;
      }
     .el-button{
      padding: 10px 30px;
      font-size: 16px;
      font-weight: bold;
      margin-left:30px;
     }

 
    /deep/.el-input__prefix{
      left: 120px;
    }
    /deep/.el-input__inner{
      padding-left: 10px;
      font-size: 12px;
    }
   }

}
// 范围日期选择器样式
.timesel {
  white-space: nowrap;
  display: inline-block;

  .el-input {
    width: 160px;
  }
}
.choiceTime {
  display: inline-block;
}
</style>
